<template>
  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem prop="userName">
      <Input v-model="form.userName" placeholder="请输入用户名" style="border-radius: 0">
        <span slot="prepend">
<!--          <Icon :size="14" type="ios-person"></Icon>-->
          <img :src="icon1" style="width: 14px;height: 14px;">
        </span>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" v-model="form.password" placeholder="请输入密码">
        <span slot="prepend">
          <img :src="icon2" style="width: 14px;height: 14px;">
        </span>
      </Input>
    </FormItem>
    <!-- 验证码组件 -->
    <verify
      ref="verify"
      v-model="form.code"
      :slideverify="slideverify"
      :showSlider="showSlider"
      @changeShowSlider="showSlider = $event"
      @onSuccessVerify="onSuccessValid"
    ></verify>
    <Checkbox v-model="checked" style="margin-bottom: 15px;color: #0052DB" >&nbsp;&nbsp;记住帐号</Checkbox>
    <FormItem>
      <Button style="height: 45px;font-size: 20px;" @click="handleSubmit" type="primary" long>登&nbsp;&nbsp;&nbsp;录</Button>
    </FormItem>
  </Form>
</template>
<script>
// import { getCodeImg } from '../../../api/user'
import verify from '../component/verify'
import icon1 from '../../assets/images/icon1.png'
import icon2 from '../../assets/images/icon2.png'
import CryptoJS from 'crypto-js'
export default {
  name: 'LoginForm',
  components: {
    verify
  },
  props: {
    userNameRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '账号不能为空', trigger: 'blur' }]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      }
    },
    codeRules: {
      type: Array,
      default: () => {
        return []
        // return [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
      }
    },
    picUrl: {
      type: String,
      default: () => {
        return '/api/uc/sc/loginService/genVerifyCode'
      }
    },
    slideverify: {
      type: Boolean,
      default: () => {
        return false // 是否开启滑动验证功能
      }
    }
  },
  async mounted () {
    this.getCookie()
  },
  data () {
    return {
      form: {
        userName: '',
        password: '',
        code: ''
      },
      checked: false,
      showRegister: false,
      showSlider: false,
      icon1,
      icon2
    }
  },
  computed: {
    rules () {
      return {
        userName: this.userNameRules,
        password: this.passwordRules,
        code: this.codeRules
      }
    }
  },
  methods: {
    // AES 加密
    encrypt (word) {
      // 和后端沟通后写死key和偏移量
      let key = CryptoJS.enc.Utf8.parse('asd8a6218921h123')
      let iv = CryptoJS.enc.Utf8.parse('iv_login_p3XxcC8')

      let srcs = CryptoJS.enc.Utf8.parse(word)
      var encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
      })

      return CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
    },
    async updateCode () {
      this.$refs.verify.updateCode()
    },
    handleSubmit () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 开启滑动验证，弹出模态框
          if (this.slideverify) {
            this.showSlider = true
          } else {
            // 验证通过
            this.onSuccessValid()
          }
        }
      })
    },
    // 验证通过事件
    onSuccessValid (code = '') {
      if (this.checked) {
        this.setCookie(this.form.userName, 3)
      }
      this.$emit('on-success-valid', {
        userName: this.form.userName,
        password: this.encrypt(this.form.password), // 密码加密
        code: code || this.form.code
      })
    },
    // 设置cookie
    setCookie (userId, days) {
      let date = new Date() // 获取时间
      date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days) // 保存的天数
      // 字符串拼接cookie
      window.document.cookie =
        'userName' + '=' + userId + ';path=/;expires=' + date.toDateString()
      // window.document.cookie =
      //   'password' + '=' + password + ';path=/;expires=' + date.toGMTString()
    },
    // 读取cookie 将用户名和密码回显到input框中
    getCookie () {
      if (document.cookie.length > 0) {
        let arr = document.cookie.split('; ') // 分割成一个个独立的“key=value”的形式
        for (let i = 0; i < arr.length; i++) {
          let arr2 = arr[i].split('=') // 再次切割，arr2[0]为key值，arr2[1]为对应的value
          if (arr2[0] === 'userName') {
            this.form.userName = arr2[1]
            this.checked = true
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../index.less';
</style>
